<script setup>
import { ref, reactive, watch } from 'vue';
import { statementApi } from '@T2/service/api.ts';
import Group from './group.vue';
import Charts from './components/charts.vue';

const Rt = reactive({
  optionID: null,
  statementID: null,
  statementList: [],
});
const optionChange = (data, node) => {
  const { id } = data || {};
  Rt.statementID = null;
  if (Rt.optionID !== id) {
    getStatement(id);
  }
  Rt.optionID = id || null;
}
const statementChange = (data, node) => {
  const { id, option } = data || {};
  Rt.statementID = id || null;
  if (Rt.optionID !== option) {
    getStatement(option);
  }
  Rt.optionID = option || null;
}

const getStatement = (optionID) => {
  Rt.statementList = [];
  if (!optionID) {
    return;
  }
  statementApi({
    method: 'get',
    params: {
      option: optionID,
      rtype: '分组',
    }
  }).then(res => {
    Rt.statementList = res.results || [];
  });
}

</script>

<template>
  <div class="view flex">
    <div class="statement">
      <Group @option-change="optionChange" @statement-change="statementChange" />
    </div>
    
    <div class="card-box flex--center flex-wrap scroller-aside">
      <div class="card-item flex-center" v-for="(item, index) in Rt.statementList">
        <Charts :isActive="Rt.statementID === item.id" :statement="item" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.view {
  width: 100%;
  height: 100%;
}
.statement {
  width: fit-content;
  height: calc(100% - 20px);
  background: #FFFFFF;
  box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.15);
  border-radius: 10px;
  margin: 10px;
}
.card-box {
  width: 100%;
  overflow-x: hidden;
  overflow-y: overlay;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}
.card-item {
  min-width: 200px;
}
:deep(.el-message-box__container) {
  display: flex;
}
</style>